import { PenEventProps } from "@/types";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { Button, Input, Space } from "antd";
import { ReactAceEditor } from "@/components/common/ReactAceEditor.tsx";
import { useState } from "react";

export function EventExecuteJs(props: PenEventProps) {
  const [showCodeEditor, setShowCodeEditor] = useState(false);

  return (
    <Space style={{ padding: "0" }} className={"w-full"} direction="vertical">
      <FormRowCol label={"Javascript"}>
        <Button onClick={() => setShowCodeEditor(true)}>编 辑</Button>

        <ReactAceEditor
          open={showCodeEditor}
          tip={`参考文档：<a target='_blank' style="color: #1890ff" href="https://doc.le5le.com/document/119627190#%E6%89%A7%E8%A1%8CJS%E4%BB%A3%E7%A0%81">执行js代码</a>`}
          onOk={(code) => {
            setShowCodeEditor(false);
            props.onChange("value", code, props.index);
          }}
          onCancel={() => setShowCodeEditor(false)}
          value={typeof props.item.value == "string" ? props.item.value : ""}
        ></ReactAceEditor>
      </FormRowCol>
      <FormRowCol label={"函数参数"}>
        <Input
          value={props.item.params}
          onChange={(e) => {
            props.onChange("params", e.target.value, props.index);
          }}
        />
      </FormRowCol>
    </Space>
  );
}
